Home  |  About  | Last |  Submit  |  Contact
AllQuests.com




Previous Question:  MSIE 6 Quirk  CSSNext Question:  a question about offsetParent  CSS
Question [HELP]Works in IE but not others ( SitePoint Forums CSS )
Updated: 2008-11-23 05:25:02 (1)
[HELP]Works in IE but not others

Hello-

I'm having a problem with positioning one element on my web site. It works fine in IE but Opera, Firefox, Mozilla, and Netscape all push the element to the left. I've tried just about everything I can think of and I'm hoping another set of eyes can see what I'm missing.

The site is http://design.dvdfuture.com/index.php When you go to it in IE it looks right any other browser and the feature review is off to the left. The CSS code is below. Thanks for any help.
Code:
/* every page */
body {
 text-align: center;
 background: #C1D8E2 url(../images/background3.jpg) repeat-x bottom fixed;
 background-color: #C1D8E2;
 margin: 0;
 padding: 0;
}
#wrap {
 top: 0px;
 margin: auto;
 width: 770px;
 text-align: left;
}
#header {
 top: 0px;
 width: 770px;
 height: 100px;
 z-index: 10;
 background: url(../images/header.jpg) no-repeat top;
 padding: 0 0 0 0;
 margin: 0 0 0 0;
}
#subnavigation {
 position: relative;
 /*top: -25px;*/
 /*z-index: 20;*/
 width: 770px;
 height: 30px;
 background: url(../images/sub-nav-bg.jpg) no-repeat top;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 7pt;
 font-weight: bold;
 color: #FFFFFF;
 margin: 0;
 padding: 0px 0px 0px 0px;
 clear: both;
 /*border-style: solid;
 border-width: 1px;
 border-color: red;*/
}
#subnavigation a {
 text-decoration: none;
 color: #FFFFFF;
}
#subnavigation a:hover {
 text-decoration: underline;
 color: #FF9900;
}
#subnavleft {
 float: left;
 width: 470px;
 text-align: left;
 padding: 8px;
}
#subnavright {
 float: right;
 width: 250px;
 text-align: right;
 padding: 8px;
}
#content {
 position: relative;
 /*top: -25px;*/
 /*z-index: 10;*/
 float: right;
 width: 770px;
 background: url(../images/content-bg-home.gif) repeat-y top;
}
#firstrow {
 width: 770px;
}
#secondrow {
 position: relative;
 top: 0px;
 width: 770px;
 clear: both;
}
#thirdrow {
 position: relative;
 top: 0px;
 width: 770px;
 clear: both;
}
#nemo {
 position: relative;
 left: 1px;
 float: left;
 background: url(../images/nemo.jpg) no-repeat top;
 width: 88px;
 height: 135px;
 padding: 0;
 margin: 0;
}
#advertisement {
 /*width: 481px;*/
 width: 672px;
 text-align: center;
 padding: 5px 0 0 0;
 margin: 0;
 float: left;
}
#footer {
 position: relative;
 /*top: -25px;*/
 width: 770px;
 height: 30px;
 background: url(../images/footer-bg.jpg) no-repeat top;
 text-align: center;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 7pt;
 font-weight: bold;
 color: #FFFFFF;
 margin: 0;
 padding: 0;
 clear: both;
}
#footer a {
 text-decoration: underline;
 color: #FFFFFF;
}
#footer a:hover {
 text-decoration: none;
 color: #FF9900;
}
/* end every page */
 
 
/* home page specfic */
#contentleft {
 float:left;
 width:770px;
 font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
 font-size: 8pt;
 color: #333333;
 font-weight: normal;
}
#contentleft a {
 text-decoration: none;
 font-weight: normal;
 color: #FF9900;
}

#contentleft a:hover {
 text-decoration: underline;
 font-weight: normal;
 color: #6684A9;
}

#column1 {
 width: 300px;

 float: left;
 margin: 0;
 padding: 0 0 0 0;
 margin: 0;
 text-align: center;
}

#column2 {
 width: 234px;
 float: left;
 margin: 0;
 padding: 0; 
}

#column3 {
 width: 235px;
 float: right;
 margin: 0;
 padding: 0; 
}

#dvd {
 padding: 0 5px 0 5px;
 margin: 0;
}

#dvd ul {
 list-style-type: disc;
 list-style-image: url(../images/arrows.gif);
 list-style-position: outside;
 padding: 0;
 margin: 0 0 0 1em;
}

#theatrical {
 padding: 0 5px 0 5px;
 margin: 0;
}

#theatrical ul {
 list-style-type: disc;
 list-style-image: url(../images/arrows.gif);
 list-style-position: outside;
 padding: 0;
 margin: 0 0 0 1em;
}

#feature {
 padding: 0;
 margin: 0;
 text-align: center;
 width: 250px;
}

#feature p {
 text-align: justify;
 padding: 0;
 margin: 0;
}

#feature a {
 font-weight: bold;
}

#feature a:hover {
 font-weight: bold;
}

/* end home page specfic*/
 
/* navigation */
#navigation {
 float:left;
 width:100%;
 background: url("../images/nav-bg.gif") no-repeat bottom;
 font-size:10px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 line-height:normal;
 overflow: hidden;
 z-index: 20;
 position: relative;
 top: 78px;
 vertical-align: bottom;
}
#navigation ul {
 margin:0px 0px 0px 0px;
 padding:0px 0px 0;
 list-style:none;
}
#navigation li {
 float:left;
 background:url("../images/nav-left.gif") no-repeat left top;
 margin:0;
 padding:0 0 0 9px;
}
#navigation a {
 float:left;
 display:block;
 background:url("../images/nav-right.gif") no-repeat right top;
 padding:5px 15px 4px 5px;
 text-decoration:none;
 font-weight:bold;
 color:#999999;
}
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#navigation a {float:none;}
/* End IE5-Mac hack */
#navigation a:hover {
 color:#000000;
}
#navigation #current {
 background-image:url("../images/nav-left_on.gif");
}
#navigation #current a {
 background-image:url("../images/nav-right_on.gif");
 color:#000000;
 padding-bottom:5px;
}
/* end navigation */

Answers: [HELP]Works in IE but not others ( SitePoint Forums CSS )
[HELP]Works in IE but not others

You should add a left margin on the feature CSS:

#feature {
padding: 0;
margin: 0 0 0 20px;
text-align: center;
width: 250px;
}

this will fix it in the other browsers but will probably mess it up in IE this time.
I'ld look for the cause but I don't have time right now

Percept

Previous Question:  MSIE 6 Quirk  SitePoint Forums  CSSNext Question:  a question about offsetParent  SitePoint Forums  CSS

- Source: [HELP]Works in IE but not others SitePoint Forums CSS
- Previous Question: MSIE 6 Quirk SitePoint Forums CSS
- Next Question: a question about offsetParent SitePoint Forums CSS